<template>
	<view class="container">
		
		<!-- 顶部导航 -->
		<view class="fixHeader flex-y-center" :style="{paddingTop: StatusBar+'px'}">
		  <view class="leftbtn" @click="goBack()">
		    <image :src="$util.img('/image/header_left.png')" mode="widthFix" style="width: 60rpx;"></image>
		  </view>
		</view>
		<!-- 图片轮播——带右下角数量显示 -->
		<view class="advertisement m-b-30">
		  <swiper :autoplay="false" :interval="3000" :duration="1000" :circular="true" indicator-active-color="#00D075" indicator-color="#EDEEF0" :indicator-dots="true">
		    <swiper-item v-for="(item,index) in piclist" :key="index" @click="previewMedia(index)">
		      <image :src="$util.img(item)" mode="aspectFill" lazy-load></image>
		    </swiper-item>
		  </swiper>
		</view>
		
		<view class="goodsInfo fill-base m-b-20">
		  <view class="font-32 name m-b-10">{{goodsDetail.room_name}}</view>  
		  <view class="flex m-b-10">
		  	<view class="m-r-10"
				v-for="(tag,tagindex) in goodsDetail.room_label" 
				:key="tagindex"
				:class="{'tags1': tagindex % 2 === 0, 'tags2': tagindex % 2 !== 0}"
			>
				{{tag}}
			</view>
		  </view>
		</view>
		
		<view class="fill-base goodsInfo">
			<view class="font-32 text-bold">包厢介绍</view>
			<view class="goods-details" v-if="goodsDetail.room_content">
				<rich-text :nodes="goodsDetail.room_content" :data-nodes="goodsDetail.room_content"></rich-text>
			</view>
		</view>
		
		<view class="footer fixfooter" :class="{ 'bottom-safe-area': isIphoneX }">
			<view class="submit" @click="showMake = true">立即预约</view>
		</view>
		<make-food :show="showMake" @close="showMake = false" makeType="business" v-if="showMake" :roomId="id" ></make-food>
	</view>
</template>

<script>
	import makeFood from '../../components/makeFood/makeFood.vue'
	import htmlParser from '@/common/js/html-parser';
	export default {
		components: {
			makeFood
		},
		data() {
			return {
				StatusBar: getApp().globalData.StatusBar,
				piclist: [],
				isIphoneX: false, //判断手机是否是iphoneX以上
				showMake: false,
				goodsDetail: {},
				id: ''
			}
		},
		onLoad(data) {
		  this.isIphoneX = this.$util.uniappIsIPhoneX()
		  this.id = data.id;
		  this.getDetail();
		},
		methods: {
			previewMedia(index) {
				var paths = [];
				for (let i = 0; i < this.piclist.length; i++) {
					paths.push(this.$util.img(this.piclist[i]));
				}
				uni.previewImage({
					current: index,
					urls: paths,
				});
			},
			goBack() {
				// 判断路由是否有上一页，如果有则返回上一页，否则返回到首页
				if (getCurrentPages().length > 1) {
					uni.navigateBack()
				}else {
					this.$util.redirectTo('/pages/index/index')
				}
			},
			getDetail() {
				this.$api.sendRequest({
			      url: "/api/food/roominfo",
			      data: {
			        room_id: this.id,
			      },
			      success: res => {
			        if(res.code == 0) {
			         this.goodsDetail = res.data;
					 // 商品详情
					if (this.goodsDetail.room_content) this.goodsDetail.room_content = htmlParser(this.goodsDetail.room_content);

					uni.setNavigationBarTitle({
						title: this.goodsDetail.room_name
					})

					if(this.goodsDetail.room_image) this.piclist = this.goodsDetail.room_image.split(',')

					
					if(this.goodsDetail.room_label) {
						// 判断里面是否有逗号，如果有就分割成数组
						if(this.goodsDetail.room_label.indexOf(',') != -1) this.goodsDetail.room_label = this.goodsDetail.room_label.split(',')
						else this.goodsDetail.room_label = [this.goodsDetail.room_label]
					}else this.goodsDetail.room_label = []
					

			        }else {
						this.$util.showToast(res.message);
					}
			      }
			    })
			},
		}
	}
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 160rpx;
}
.fixHeader {
  position:fixed;
  top:0;
  z-index: 9;
  width: 100%;
  box-sizing: border-box;
  .leftbtn {
    padding-left: 30rpx;
    // padding-top: 10rpx;
	margin-right: 30rpx;
	width: 60rpx;
	height: 60rpx;
  }
}
// 轮播图
.advertisement {
  position: relative;
  width: 750rpx;
  height: 750rpx;
  /deep/ swiper {
    height: 750rpx;
  }
  image {
    margin: 0 auto;
    width: 750rpx;
    height: 750rpx;
  }
}
.goodsInfo {
  padding: 30rpx 24rpx 20rpx;
  .name {
    line-height: 1.4;
  }
}

.tags1 {
	font-size: 20rpx;
	color: #00B867;
	border-radius: 10rpx;
	background: #E6FAF1;
	padding: 0 10rpx;
	margin-right: 10rpx;
}
.tags2 {
	font-size: 20rpx;
	color: #0C7EFF;
	border-radius: 10rpx;
	background: #E6F2FF;
	padding: 0 10rpx;
}
</style>
